<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="0" :xs="0">
          <div class="h_left">
            <div class="label">访问账号</div>
            <div>您好！欢迎使用淄博金融风控管理平台</div>
            <div>您上次的登录时间：2021-06-18</div>
            <div class="label"> <i class="el-icon-view"></i> 快速链接 </div>
            <div class="history">
              <el-timeline>
                <el-timeline-item placement="bottom" v-for="(item,index) in visitedViews" :key="index">
                  <el-card>
                    <h4>{{item.title}} - 淄博金融风控管理平台</h4>
                    <p class="fr">于 {{item.ptime}} 访问</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-col>
        <el-col :span="24" :xs="24">
          <div class="h_right">
            <div class="h_date f14">截止统计日期: {{new Date().toLocaleString()}}</div>
            <!-- <div class="chart-container">
              <MapChart :cData="d1" id="c1" height="100%" width="50%" />
              <PieChart :cData="d3" id="c3" height="100%" width="50%" />
            </div> -->
            <div class="container">
              <p>查询日期：</p>
              <div class="dataSearch">
                <el-date-picker
                  v-model="timeChecked"
                  @change="selectTime"
                  type="monthrange"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份">
                </el-date-picker>
              </div>
            </div>
            <div class="chart-container">
              <MoreChart :cData="d2" ref="c2" id="c2" height="100%" width="50%" />
              <MoreChart :cData="d5" ref="c5" id="c5" height="100%" width="50%" />
            </div>
            <div class="chart-container">
              <el-table :data="d4" style="width: 100%" border :header-cell-style="{background:'#f5f9ff'}">
                  <el-table-column
                      prop="address"
                      label="区县"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="dkye"
                      label="贷款余额(万元)"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="dkyezb"
                      label="贷款余额占比"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="dkyetb"
                      label="贷款余额同比增速"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="badAmount"
                      label="不良贷款余额(万元)"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="amountPercent"
                      label="不良贷款余额占比"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="num"
                      label="企业总数(家)"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="zdqysl"
                      label="在贷企业数量(家)"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="badNum"
                      label="不良贷款企业总数(家)"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="numPercent"
                      label="不良贷款企业占比"
                      align="center">
                  </el-table-column>
                </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import Chart from '@c/Charts/LineMarker';
import BarChart from '@c/Charts/BarChart';
import PieChart from '@c/Charts/PieChart.vue';
import MoreChart from "@c/Charts/MoreChart";
import MapChart from "@c/Charts/MapChart";
import {getBasics, getBasicsTime } from "@/api/chart";
export default {
  components: {
    MapChart,
    MoreChart,
    Chart,
    BarChart,
    PieChart
  },
  data() {
    return {
      ShowPage:false,
      tabNum: '1',
      timeChecked:[],
      pickerOptions:{
        disabledDate(v){
          return v.getTime() > Date.now() - 8.64e7*30;
        }
      },
      d1: {
        // title: '客户分布图(数量/个)',
        //cLabel: ['崇川市', '通州市', '海门市', '启东市', '如皋市', '海安市', '如东县'],
        cData: []
      },
      d2: {
        title: '淄博市在贷企业数量变动趋势',
        cLabel: [],
        cData: [{
          name: '在贷企业数量(家)',
          type: 'bar',
          color:'#73a0fa',
          lineWidth: 30,
          data: []
        }, {
          name: '在贷企业数量同比增长率(%)',
          type: 'line',
          color:'#ffc000',
          yAxisIndex:1,
          lineWidth: 20,
          data: []
        },],
        yAxis:{
          type: 'value',
          name: '百分比',
          position: 'right',
          axisLine: {
            show: true,
            /* lineStyle: {
              color: '#FF7F00'
            } */
          },
          axisLabel: {
            formatter: '{value} %'
          }
        }
      },
      d5: {
        title: '淄博市贷款余额变动趋势',
        cLabel: [],
        cData: [{
          name: '贷款余额（万元）',
          type: 'bar',
          color:'#ed7d31',
          lineWidth: 30,
          data: []
        },{
          name: '贷款余额同比增长率(%)',
          type: 'line',
          color:'#a5a5a5',
          yAxisIndex:1,
          lineWidth: 20,
          data: []
        }],
        yAxis:{
          type: 'value',
          name: '百分比',
          position: 'right',
          axisLine: {
            show: true,
            /* lineStyle: {
              color: '#FF7F00'
            } */
          },
          axisLabel: {
            formatter: '{value} %'
          }
        }
      },
      d3: {
        title: '淄博市贷款余额分布',
        cLabel: [],
        cData: []
      },
      d4:[]
    }
  },
  mounted() {
    this.getChartData();
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    },
  },
  methods: {
    handleClick(e) {
      // debugger
    },
    toFix(val){
      return (val/10000).toFixed(2);
    },
    getChartData(params = {}) {
      getBasics(params).then(data => {
        console.log(data.data);
        let len = data.data.sixByTotal.length;
        this.timeChecked[0] = (data.data.sixByTotal[len-1].time).split('.').join('-');
        this.timeChecked[1] = (data.data.sixByTotal[0].time).split('.').join('-');
        let totalDkye = data.data.basics.map(item=>item.value).reduce((cur,prev)=>cur+prev,0);
        for (var i = 0; i < data.data.basics.length; i++) {
          /* this.d1.cData.push({name: data.data.basics[i].name,
            value: data.data.basics[i].value,
            badAmount: data.data.basics[i].badAmount,
            amountPercent: (data.data.basics[i].badAmount/data.data.basics[i].value).toFixed(2)*100,
            num:  data.data.basics[i].num,
            badNum:  data.data.basics[i].badNum,
            numPercent: (data.data.basics[i].badNum/data.data.basics[i].num).toFixed(2)*100
          });
          this.d3.cLabel.push(data.data.basics[i].name);
          this.d3.cData.push({value:this.toFix(data.data.basics[i].value),name:data.data.basics[i].name})  */
          this.d4.push({
            address:data.data.basics[i].name,
            dkye:this.toFix(data.data.basics[i].value),
            dkyezb:data.data.basics[i].value?((data.data.basics[i].value/totalDkye)*100).toFixed(2)+'%':0,
            dkyetb:'',
            zdqysl:data.data.basics[i].num,
            badAmount: this.toFix(data.data.basics[i].badAmount),
            amountPercent: ((data.data.basics[i].badAmount/data.data.basics[i].value)*100).toFixed(2)+'%',
            num:  data.data.basics[i].num,
            badNum:  data.data.basics[i].badNum,
            numPercent: ((data.data.basics[i].badNum/data.data.basics[i].num)*100).toFixed(2)+'%'
          });
        }
        this.d4.map(item=>{
          for(let d=0;d<data.data.growth.length;d++){
            if(item.address == data.data.growth[d].SSQU){
              item.dkyetb = data.data.growth[d].ratio ? ((data.data.growth[d].ratio)*100).toFixed(2)+'%' : '--'
            }
          }
        })
        let sixByCount = data.data.sixByCount.reverse();
        let sixCountRatio = data.data.sixCountRatio.reverse();
        for(let k=0;k<data.data.sixByCount.length;k++){
          this.d2.cLabel.push(sixByCount[k].time);
          this.d2.cData[0].data.push(Number(sixByCount[k].num));
          if(sixCountRatio.length >0 && sixCountRatio[k]){
            this.d2.cData[1].data.push((sixCountRatio[k].ratio)*100);
          }else{
            this.d2.cData[1].data.push(null);
          }
        }
        let sixByTotal = data.data.sixByTotal.reverse();
        let sixTotalRatio = data.data.sixTotalRatio.reverse();
        for(let n=0;n<sixByTotal.length;n++){
          let total = this.toFix(sixByTotal[n].total);
          this.d5.cLabel.push(sixByTotal[n].time);
          this.d5.cData[0].data.push(Number(total));
          if(sixTotalRatio.length >0 && sixTotalRatio[n]){
            this.d5.cData[1].data.push((sixTotalRatio[n].ratio)*100);
          }else{
            this.d5.cData[1].data.push(null);
          }
        }
        this.$refs.c2.initChart(this.d2);
        this.$refs.c5.initChart(this.d5);
      }).catch(() => {
        //this.$message.error("信息获取超时!");
      });
    },
    selectTime(){
      let params = {
        startTime:this.timeChecked[0].split('-').join(''),
        endTime:this.timeChecked[1].split('-').join('')
      }
      getBasicsTime(params).then(data=>{
        console.log(data)
        if(data.status){
          this.d2.cLabel = [];
          this.d2.cData[0].data = [];
          this.d2.cData[1].data = [];
          this.d5.cLabel = [];
          this.d5.cData[0].data = [];
          this.d5.cData[1].data = [];
          for(let k=0;k<data.data.count.length;k++){
            this.d2.cLabel.push(data.data.count[k].time);
            this.d2.cData[0].data.push(data.data.count[k].num);
            if(data.data.countRatio[k]){
              this.d2.cData[1].data.push(data.data.countRatio[k].ratio);
            }else{
              this.d2.cData[1].data.push('-');
            }
          }
          for(let n=0;n<data.data.num.length;n++){
            let total = this.toFix(data.data.num[n].total);
            this.d5.cLabel.push(data.data.num[n].time);
            this.d5.cData[0].data.push(total);
            if(data.data.totalRatio[n]){
              this.d5.cData[1].data.push(data.data.totalRatio[n].ratio);
            }else{
              this.d5.cData[1].data.push('-');
            }
          }
          this.$refs.c2.initChart(this.d2);
          this.$refs.c5.initChart(this.d5);
        }
      })
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
.border {
  border-left: 1px solid #797979;
}

.h_left {
  .label {
    font-size: 20px;
    font-weight: 600;
    line-height: 40px;
  }

  .history {
    .el-timeline {
      padding-left: 0;
      cursor: pointer;
    }

    /deep/ .el-card__body {
      padding: 10px;
    }
  }

}

.h_right {
  /deep/ .el-tabs__item {
    font-size: 20px;
    font-weight: 600;
  }

  .label {
    line-height: 40px;
  }

  .h_date {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .chart-container {
    height: 450px;
    display: flex;
  }
  .container{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  

  .data_label {
    margin-top: 15px;
    border-bottom: 1px solid #eaeaea;
  }

}
</style>
